<template>
  <div class="lists">
    <transition
      enter-active-class='animated zoomIn'
      leave-active-class='animated zoomOut'
    >
      <div class="chose_box" v-if="$store.state.writeDisplay" ref="box">
        <div class="cbottom"></div>
        <p class="send_articol">发布文章</p>
        <span class="class">文章分类：</span>
        <span class="class1">{{Class || $store.state.articalClass}}</span>
        <div class="uls1">
          <div @click="choseClassshandel">前端技术</div>
          <div @click="choseClassshandel">后端技术</div>
          <div @click="choseClassshandel">其它技术</div>
        </div>
        <span class="class">文章标签：</span>
        <span class="tag">{{choseClass || $store.state.articalTag}}</span>
        <ul class="tags">
          <template v-for="items of tag">
            <li :key="items.id" v-text="items.tag" @click="choseClasshandel"></li>
          </template>
        </ul>
        <span v-if="tag" class="span">自定义标签：</span>
        <input
          v-if="tag"
          type="text"
          class="input"
          maxlength="10"
          v-model="choseClass"
          @focus="inputHandel"
        />
        <div class="sendsure" @click="sendSureHandel" v-if="tag && !this.$route.params.id">确定</div>
      </div>
    </transition>
  </div>
</template>

<script>
import { sendArtishuju } from 'com/shuju'
import { mapState } from 'vuex'
export default {
  name: 'WriteClass',
  data () {
    return {
      tag: '',
      tags1: [
        {id: '01', tag: 'HTML'},
        {id: '02', tag: 'CSS'},
        {id: '03', tag: 'JavaScript'},
        {id: '04', tag: 'node.js'},
        {id: '05', tag: 'Vue.js'},
        {id: '06', tag: 'Angular'},
        {id: '07', tag: 'React'}
      ],
      tags2: [
        {id: '01', tag: 'Java'},
        {id: '02', tag: 'C#'},
        {id: '03', tag: 'Python'},
        {id: '04', tag: 'Spring'},
        {id: '05', tag: 'C++'},
        {id: '06', tag: 'C'},
        {id: '07', tag: 'PHP'}
      ],
      tags3: [
        {id: '01', tag: 'HTML'},
        {id: '02', tag: 'CSS'},
        {id: '03', tag: 'JavaScript'},
        {id: '04', tag: 'node.js'},
        {id: '05', tag: 'Vue.js'},
        {id: '06', tag: 'Angular'},
        {id: '07', tag: 'React'},
        {id: '08', tag: 'Java'},
        {id: '09', tag: 'C#'},
        {id: '10', tag: 'Python'},
        {id: '11', tag: 'Spring'},
        {id: '12', tag: 'C++'},
        {id: '13', tag: 'C'},
        {id: '14', tag: 'PHP'}
      ],
      Class: '',
      choseClass: ''
    }
  },
  watch: {
    $route (to, from) {
      if (from.path === '/write') {
        this.Class = ''
        this.tag = ''
        this.choseClass = ''
      }
    }
  },
  computed: {
    ...mapState({
      aTitle: 'articalTitle',
      aSummary: 'articalSummary',
      aContent: 'articalContent'
    })
  },
  methods: {
    inputHandel () {
      this.choseClass = ''
    },
    choseClassshandel () {
      if (event.target.innerText === '前端技术') {
        this.choseClass = ''
        this.tag = this.tags1
      } else if (event.target.innerText === '后端技术') {
        this.choseClass = ''
        this.tag = this.tags2
      } else {
        this.choseClass = ''
        this.tag = true
      }
      this.Class = event.target.innerText
      this.$store.commit('getArticalClass', this.Class)
      this.$store.commit('getArticalTag', '')
    },
    choseClasshandel () {
      this.choseClass = event.target.innerText
      this.$store.commit('getArticalTag', this.choseClass)
    },
    sendSureHandel () {
      if (this.choseClass === '请选择标签') {
        alert('请选择标签')
      } else if (!this.Class) {
        this.Class = '请选择分类'
      } else if (!this.choseClass) {
        this.choseClass = '请选择标签'
      } else if (this.Class && this.choseClass) {
        const datas = new FormData()
        datas.set('name', this.Class)
        datas.set('tags', this.choseClass)
        datas.set('title', this.aTitle)
        datas.set('summary', this.aSummary)
        datas.set('content', this.aContent)
        // uploadImg(datass, this)
        this.$store.commit('getArticalClass', '')
        this.$store.commit('getArticalTag', '')
        sendArtishuju(datas, this)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .lists{
      position: relative
      width: 1000px
      height: 20px
      margin: 0 auto
      z-index: 15
      .chose_box{
        background: rgb(255,255,255)
        position: absolute
        right: 0
        top: 75px
        width: 300px
        height: auto
        transition: all .5s
        border: 1px solid rgb(210,210,210)
        box-shadow: 0 0 .2px rgb(240,240,240)
        .input{
          width: 100px
          margin-top: .1rem
          height: 25px
          font-size: .3rem
          color: rgb(160,160,160)
          border: 1px solid rgb(230,230,230)
        }
        .tags{
          list-style: none
          padding: 0
          margin: 0
          display: flex
          flex-wrap: wrap
          li{
            border: 1px solid rgb(220,220,220)
            width: 82px
            height: 30px
            padding: .1rem
            text-align: center
            color: rgb(140,140,140)
            box-sizing: border-box
            cursor: pointer
          }
          li{
            margin-left: .3rem
            margin-top: .2rem
          }
          li:hover{
            color: rgb(15,113,213)
            background: rgba(50,113,213,.2)
          }
        }
        .span{
          display: inline-block
          margin-left: .3rem
          width: 100px
          height: 30px
        }
        .cbottom{
          position: absolute
          right: 75px
          top: -12px
          width: 10px
          height: 10px
          border: 1px solid rgb(210,210,210)
          border-bottom: 1px solid white
          z-index: 10
        }
        .send_articol{
          color: rgb(180,180,180)
          margin: 0
          font-size: .45rem
          font-weight: bold
          letter-spacing: 1px
          padding-top: .3rem
          padding-bottom: .3rem
          padding-left: .3rem
        }
        .sendsure{
          width: 32%
          height: 30px
          line-height: 30px
          text-align: center
          margin: .5rem auto .1rem auto
          color: rgb(15,113,213)
          border: 1px solid rgb(15,113,213)
          padding: .05rem
        }
        .sendsure:hover{
          cursor: pointer
          background-color: rgba(15,113,213,.05)
        }
        .uls1{
          padding-top: .1rem
          padding-bottom: .3rem
          width: 100%
          height: 60px
          display: flex
          box-sizing: border-box
          flex-wrap: wrap
          div{
            padding: .05rem
            text-align: center
            line-height: 25px
            margin-top: .1rem
            margin-left: .3rem
            height: 25px
            color: rgb(154,158,154)
            border: 0.5px solid rgb(230,230,230)
          }
          div:hover{
            cursor: pointer
            color: rgb(15,113,213)
            background: rgba(50,113,213,.2)
          }
        }
        .class{
          font-size: .35rem
          color: rgb(154,158,154)
          padding-top: .3rem
          padding-bottom: .1rem
          padding-left: .3rem
        }
        .tag{
          font-size: .35rem
          font-weight: bold
          color: rgb(15,113,213)
          padding-top: .3rem
          padding-bottom: .1rem
          padding-left: .3rem
        }
        .class1{
          font-size: .35rem
          font-weight: bold
          color: rgb(15,113,213)
          padding-top: .3rem
          padding-bottom: .1rem
          padding-left: .3rem
        }
      }
    }
</style>
